import React, { useEffect, useState } from 'react'
import { Checkbox, Form, message, Spin } from 'antd'
import useGetTableData from '@/hooks/useGetTableDataV2'
import { queryBoxLabel, updatePreloadQty } from '@/api/purchase'
import SearchForm from '@/components/CustomForm/SearchForm'
import { useForm } from 'antd/es/form/Form'
import PageContainer from '@/components/PageContainer'
import { useBoxMarkColumns } from './TableColumns'
import { PageDataBoxLabelVO, ITableData } from './types'
import CustomTable from '@/components/CustomTable'
import { useNavigate } from 'react-router-dom'
import { UploadOutlined } from '@ant-design/icons'
import PermissionButton from '@/components/PermissionButton'
import { useAppSelector } from '@/store/hooks'
import { searchConfig } from './FormConfig'
import useSearchTemplate from '@/hooks/useSearchTemplate'
import useGetClassIds from '@/hooks/useGetClassIds'
import './index.less'
import useExport from '@/hooks/useExport'
import { exportTagMonitorInfo } from '@/api/monitor'
import { exportNotification } from '@/utils/util'
const Index: React.FC = () => {
  const navigate = useNavigate()
  const [form] = useForm()
  const [selectKeys, setselectKeys] = useState<React.Key[]>([])
  const [selectInfos, setselectInfos] = useState<PageDataBoxLabelVO[]>([])
  const [tableData, settableData] = useState<ITableData[]>([])
  const buttonCodeList = useAppSelector((state) => state.login.buttonCodeList) || []
  const { TemplateOptions, handleSearchTemplate } = useSearchTemplate()
  const { classIdOptions, settinyClassIds, tinyClassIds, handleClassIdChange } = useGetClassIds()
  const [spinning, setspinning] = useState(false)

  // const { tableProps, params, search, reset, reload } = useGetTableData<ITableData>(queryBoxLabel, {
  //   form: form,
  //   immediatelySend: false,
  //   paramsCallback: (reqParams) => {
  //     return {
  //       ...reqParams,
  //       fineClassIds: tinyClassIds.length > 0 ? tinyClassIds : null,
  //     }
  //   },
  // })
  const exportInstance = useExport({
    onSuccess: async (res) => {
      await exportNotification(res?.data, navigate).finally(() => setspinning(false))
    },
  })
  useEffect(() => {
    // search()
  }, [])
  return (
    <PageContainer className="monitor_tagmonitor_wrap">
      <SearchForm
        params={null}
        form={form}
        searchConfig={searchConfig({
          TemplateOptions,
          handleSearchTemplate,
          classIdOptions,
          settinyClassIds,
          handleClassIdChange,
        })}
        onFinish={() => {
          setselectKeys([])
          setselectInfos([])
          // search()
        }}
        onReset={() => {
          setselectKeys([])
          setselectInfos([])
          settinyClassIds([])
          form.resetFields()
          // reset()
        }}
        extra={
          <div className="table_extra_flex_wrapbox">
            <div className="table_extra_flex"></div>
            <div className="table_extra_flex">
              <PermissionButton
                permission="tagmonitorExport"
                icon={<UploadOutlined />}
                loading={exportInstance.confirmLoading}
                onClick={() => {
                  setspinning(true)
                  const paramsData = {
                    fineClassIds: tinyClassIds.length > 0 ? tinyClassIds : null,
                    purchaseType:
                      form.getFieldValue('purchaseType') === undefined ? null : form.getFieldValue('purchaseType'),
                    templateIds:
                      form.getFieldValue('templateIds') === undefined || form.getFieldValue('templateIds')?.length === 0
                        ? null
                        : form.getFieldValue('templateIds'),
                  }
                  exportInstance.handleSubmit(() => exportTagMonitorInfo(paramsData))
                }}
              >
                导出
              </PermissionButton>
            </div>
          </div>
        }
      ></SearchForm>
      <Spin spinning={spinning} fullscreen />
    </PageContainer>
  )
}

export default Index
